<template>
<div class="logo">
<img class="test" src="https://img.picui.cn/free/2024/07/05/6687ded20a084.png" alt="logo_transparent.png" title="logo_transparent.png" />
<ul>
    <li  @click="remove()">退出</li>
    <li>网页首页</li>
    <li>3613简介</li>
    <li>服务范围</li>
    <li><a href="https://www.henetc.edu.cn/">贸贸官网</a></li>
     <li><a href="waychenxi.top">作者简历</a></li>
     <li>
      <span v-if='user'>{{user}}</span>
      <router-link v-else to="/login">登录</router-link>
      </li>
      <!-- <li><router-link to="/">退出</router-link></li> -->
</ul>

  <el-carousel :interval="2000" height="444px" >
    <el-carousel-item v-for="(image, index) in images" :key="index">
      <img :src="image.imgsrc" :alt="'Slide ' + index" class="carousel-image" @click="Decid(image.id)">
    </el-carousel-item>
  </el-carousel>


</div>
  
</template>
<script>
import {test} from '@/api/test'
export default {
      data() {
    return {
      images: [
        // require('../assets/1.jpg'),
        // require('../assets/2.jpg'),
        // require('../assets/3.jpg'),
        // require('../assets/4.jpg'),
        // require('../assets/5.jpg')
      ],
       user:''
    }
   
  },
  methods:{
 getImages(){
     test().then(res=>{
      this.images=res.rows

     })
 },
Decid(id){
  console.log(id);
this.$router.push({name:'lunbodesc',params:{advid:id}})
},
remove() {
  this.$cookie.remove("an") // 更改为 "an"
  this.user = '';
  this.$router.push('/login');
}

  },
  mounted(){
    this.getImages()
  },
  created(){
 this.user = this.$cookie.get('user');
  }

}
</script >

<style scoped lang="less">
*{
    margin: 0;
    padding: 0;
}
.logo{
   width: 100%;
   height: 80px;
   background: rgb(33, 52, 88);
   text-align: center;
    position: relative; 
   .test{
    width: 100px;
    height: 100px;
  
left: 0;
position: absolute; 
}ul{
    list-style: none;
    width: 1200px;
    margin-left: 450px;
    li{
        color: aliceblue;
        width: 100px;
        float: left;
        line-height: 80px;
        margin-right: 100px;
        display: block;
        cursor: default;
    }
    a{
        color: aliceblue;
        text-decoration: none;
        list-style: none;
    }
    li:hover{
background-color: rgb(52, 82, 138);
    }
}
}

.el-carousel{
  width: 100%;
}
.carousel-image {
 width:100%;
 height: 400px;

  /* object-fit: cover;  */
}

.el-carousel__button{
    font-size: 500px;
}
::v-deep .el-carousel__arrow--left{
 
  font-size: 30px;
 
}
::v-deep .el-carousel__arrow--right{
  font-size: 30px;
 
}


</style>

